<template>
  <div class="flex-column container">
    <el-card height="150px">
      <div class="box">
        <img :src="userStore.avatar" alt="" class="avatar" />
        <div class="footer">
          <h3 class="title">
            {{ getTime() }}好啊！
            <span class="gradient">{{ userStore.userName }}</span>
          </h3>
          <p class="subtitle">秋秋甄选运营平台</p>
        </div>
      </div>
    </el-card>
    <div class="bottom">
      <svg-icon name="welcome" width="100%" height="100%"></svg-icon>
    </div>
  </div>
</template>

<script setup lang="ts" name="Home">
import { onMounted } from "vue";
import { getTime } from "../../utils/time";
// 获取用户相关的小仓库
import useUserStore from "../../store/modules/user";
let userStore = useUserStore();

// 首页挂载完毕发送请求获取用户信息
onMounted(() => {});
</script>

<style scoped lang="scss">
@import "@/styles/common.scss";
.box {
  display: flex;

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .footer {
    margin-left: 30px;
    margin-top: 15px;
    padding: 0 30px 0 0;

    .title {
      font-size: 32px;
      margin-bottom: 30px;
      font-weight: 900;

      .gradient {
        background: linear-gradient(to right, #b1d65a, #2979c5, #cc2727);
        /* 渐变方向是从左到右，颜色从红色到绿色 */
        background-clip: text;
        -webkit-background-clip: text;
        /* 兼容WebKit浏览器（例如Chrome和Safari） */
        color: transparent;
        font-size: 24px;
        font-weight: bold;
      }
    }

    .subtitle {
      font-style: italic;
      color: #eb7864;
      font-weight: 700;
    }
  }
}

.bottom {
  flex: 1;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
